<!--预览图片-->
<template>
  <div>
    <viewer :images="studentPhoto" class="descimgBox" v-if="showViewer">
      <div class="viewer-box" v-for="(decImg, index) in studentPhoto" :key="index">
        <img :src="decImg" class="viewerImg" :class="widthLine">
      </div>
    </viewer>
    <div class="imgbox" v-else>
      <img src="@/assets/imageAdmin/defultimg.jpg" alt="" class="imgUserPic">
    </div>
  </div>
</template>
<script>
export default {
  name: 'video',
  props: ['type', 'imgSrc', 'widthNumber', 'downsShow'], // 1 单张 2 多张 ； imgSrc 图片路径
  components: {},
  data() {
    return {
      studentPhoto: [],
      showViewer: false,
      widthLine: ''
    }
  },
  watch: {
    imgSrc() {
      this.showViewer = false
      this.studentPhoto = []
      this.getImg()
    }
  },
  created() {
    this.widthLine = this.widthNumber === 'mini' ? 'viewerImgMini' : (this.widthNumber === 'small' ? 'viewerImgSmall' : 'viewerImgMedium');
    if (!this.widthNumber) {
      this.widthLine = 'viewerImgMini'
    }
    this.getImg()
  },
  methods: {
    getImg() {
      if (this.imgSrc) {
        if (Number(this.type) === 1) {
          this.studentPhoto.push(this.imgSrc)
          this.showViewer = true
        } else {
          let list = []
          for (let i in this.imgSrc) {
            list.push(this.imgSrc[i])
          }
          this.studentPhoto = this.getChange(list)
        }
        this.showViewer = true
      }
    },
    isBase64(str) {
      if (str.indexOf('base64') !== -1) {
        return true
      } else {
        return false
      }
    },
    getChange(option) {
      return JSON.parse(JSON.stringify(option))
    },
    downs(option) {
      this.$emit('downs', option)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.viewerImgMini {
  width: 40px;
}

.viewerImgSmall {
  width: 130px !important;
}

.viewerImgMedium {
  width: 200px;
}

.viewerImg {
  cursor: pointer;
  border: 1px solid #eee;
  height: auto;
}

.imgUserPic {
  width: 40px !important;
  height: 40px !important;
}

.viewer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.viewer-box span {
  margin-top: 5px;
  color: #1b8de5;
  font-size: 12px;
  cursor: pointer;
}

.viewer-box span:hover {
  text-decoration: underline;
}

.descimgBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
